<template>
	<div class="volume">
		<div class="circle" draggable="true" @dragend='dragend' title="音量"> </div>
	</div>
</template>

<script>
	export default {
		name: 'volumeProgress',
		props: ['dragend'],
	}
</script>

<style>
	/* 响应式 */
	@media screen and (min-width: 0px) and (max-width: 330px) {
		.volume {
			top: 16px;
			left: 40px;
			width: 80px;
			height: 3px;
		}
		.volume .circle {
			top: -4px;
			left: 0px;
			width: 12px;
			height: 12px;
		}
	}
	@media screen and (min-width: 330px) {
		.volume {
			top: 14px;
			left: 55px;
			width: 80px;
			height: 3px;
		}
		.volume .circle {
			top: -5px;
			left: 0px;
			width: 15px;
			height: 15px;
		}
	}
	.volume {
		position: absolute;
		background: #ddd;
	}

	.volume .circle {
		position: absolute;
		float: right;
		background: #ebdbd8;
		cursor: pointer;
		border-radius: 100%;
	}
</style>
